<template>
	<view class="content">
		<view class='header'>
			<pagehead :title="title" :titlecolor='titlecolor' :isback='isback'></pagehead>
		</view>
		<view class='bankcards'>
			<bankcard v-for='(item,index) in cardlist' :key="'cardlist'+index"
			:bankname='item.bankname'  :cardtype="item.cardtype" :banklogo="item.banklogo" :cardbg="item.cardbg"></bankcard>
		</view>
		<view class='add'>
			<text class='icon'>+</text><text class='addtext'>添加银行卡</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 页面标题
				title: '我的银行卡',
				titlecolor: 'black',
				isback: true,
				// 卡片列表
				cardlist:[
					{
						bankname:'招商银行',
						cardtype:'储蓄卡',
						banklogo:'/static/images/zhaohang.png',
						cardbg:"url('/static/images/zhaoshangbg.png')"
					}
				]
			}
		},
		onReady() {

		},
		methods: {


		}
	}
</script>

<style lang='less' scoped>
	.content {
		background-color:#F2F2F2;
		min-height: 100vh;
		padding-top:1px;
		.header {
			position: fixed;
			left: 0rpx;
			top: 0rpx;
			width:100%;
			background-color:#fff;
			
		}
		.bankcards{
			margin-top:100rpx;
			min-height: 80vh;
		}
		.add{
			color:#2F70F1;
			border:4rpx solid #2F70F1;
			border-radius: 30rpx;
			width:686rpx;
			height:80rpx;
			line-height: 80rpx;
			margin:0px auto;
			text-align: center;
			.icon{
				font-size:60rpx;
				line-height: 80rpx;
			}
			.addtext{
				position: relative;
				bottom:6rpx;
			}
		}
	}
</style>
